<template>
  <div class="container">
    <div class="page">
      <div class="page__bd page__bd_spacing">
        <div class="head">
          <img src="/static/images/component/datum-bg.jpeg" style="width: 100%;height: 100%;z-index: 0;" />
          <img class="avatar"
               :src="pepple.base?pepple.base.avatarUrl:'/static/images/component/heartbeat-active.png'"
               mode="aspectFill" background-size="cover" @click="auth"/>
          <text class="name">{{pepple.detail.name}}</text>
          <text class="gender">{{pepple.detail.gender}}</text><text class="age">{{age}}岁</text><text class="education">{{pepple.detail.education}}</text>
          <text class="height">{{pepple.detail.height}}</text><text class="weight">{{pepple.detail.weight}}</text>
          <text class="address">{{pepple.detail.address}}</text>
        </div>
        <div class="people-photo" v-if="pepple.photo">
          <swiper class="photos" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                  :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
            <div v-for="(item, index) in pepple.photo" :key="index">
              <swiper-item @click="predivImage(item)">
                <image :src="item" mode="aspectFill" class="slide-image"/>
              </swiper-item>
            </div>
          </swiper>
        </div>
      </div>
      <view class="love"><image style="width:5vh;height: 5vh;position: absolute;bottom:1vh;left:3vh;" src="/static/images/component/love.png" mode="aspectFill" /><text style="font-size: 3vh;position: absolute;bottom: 1vh;left: 10vh">喜欢</text></view>
      <view class="order"><image style="width:5vh;height: 5vh;position: absolute;bottom:1vh;right:3vh;" src="/static/images/component/order.png" mode="aspectFill" /><text style="font-size: 3vh;position: absolute;bottom: 1vh;right: 10vh">预约</text></view>
    </div>
  </div>
</template>

<script>
  export default {
    name: "detail",
    component: {},
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 900,
        circular: true,
        pepple: null

      }
    },
    computed: {
      user() {
        return this.$store.state.user
      },
      age(){
        let birthDate=new Date(this.user.detail.birth);
        let nowDate=new Date();
        return parseInt(nowDate.getFullYear()-birthDate.getFullYear());
      }
    },
    methods: {
      predivImage(id) {
        wx.previewImage({
          current: id, // 当前显示图片的http链接
          urls: this.pepple.photo// 需要预览的图片http链接列表
        });
      }
    }, onShow() {
      wx.setNavigationBarTitle({title: '详细资料'})
    }, onLoad(options) {
      this.pepple = JSON.parse(options.people)
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
    overflow: hidden;
    font-family: PingFang-SC;
  }

  .head {
    top: 0;
    left: 0;
    width: 100%;
    height: 25vh;
    position: absolute;
  }
  .avatar{
    position: absolute;
    top: 5vh;
    left: 4vh;
    width: 14vh;
    height: 14vh;
    border-radius: 50%;
    z-index: 1000;
  }
  .name{
    position: absolute;
    top: 5vh;
    font-size: 5vw;
    font-family: PingFang-SC;
    left: 40vw;
    color: white;
  }

  .gender{
    position: absolute;
    top: 10vh;
    font-size: 4vw;
    font-family: Young;
    left: 40vw;
    color: whitesmoke;
  }
  .age{
    position: absolute;
    top: 10vh;
    font-size: 4vw;
    font-family: Young;
    left: 45vw;
    color: whitesmoke;
  }
  .education
  {
    position: absolute;
    top: 10vh;
    font-size: 4vw;
    font-family: Young;
    left: 55vw;
    color: whitesmoke;
  }
  .weight{
    position: absolute;
    top: 13vh;
    font-size: 4vw;
    font-family: Young;
    left: 40vw;
    color: whitesmoke;
  }
  .height{
    position: absolute;
    top: 13vh;
    font-size: 4vw;
    font-family: Young;
    left: 45vw;
    color: whitesmoke;
  }
  .address{
    position: absolute;
    top: 16vh;
    font-size: 4vw;
    font-family: Young;
    left: 40vw;
    color: whitesmoke;
  }

  .people-photo {
    top: 23vh;
    width: 96vw;
    height: 75vh;
    margin-left: 2vw;
    overflow: hidden;
    border-radius: 2vh;
    position: absolute;
  }

  .photos {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 1vh;
  }

  .content{
    top: 70vh;
    position: absolute;
    width: 98vw;
    height: 20vh;
  }

  .datum {
    height: 30vh;
    width: 98vw;
    overflow: hidden;
    border-radius: 1vh;
    background: white;
  }

  .weui-cell {
    margin-left: 5vw;
    width: 80vw;
  }

  .slide-image {
    width: 100%;
    height: 100%;
  }

  .love{
    position: absolute;
    left: 5vh;
    bottom: 3vh;
    height: 7vh;
    width: 20vh;
    background-color: lavenderblush;
    border-radius: 5vh;
  }
  .order{
    position: absolute;
    right: 5vh;
    bottom: 3vh;
    height: 7vh;
    width: 20vh;
    background-color: lavenderblush;
    border-radius: 5vh;
  }
</style>
